<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:fragment="layout(title, content, styles, scripts)">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">[(${siteSettings != null ? siteSettings.get('siteName') : '优选商城'})]</title>
    <meta name="description" th:content="${siteSettings != null ? siteSettings.get('siteDescription') : ''}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <style>
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        main {
            flex: 1;
        }
        /* 导航栏样式优化 */
        .navbar {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 1rem 0;
        }
        .navbar-brand {
            color: #ffffff !important;
            font-weight: bold;
            font-size: 1.5rem;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        .navbar-brand:hover {
            background: rgba(255,255,255,0.1);
            transform: translateY(-2px);
        }
        .navbar .nav-link {
            color: rgba(255,255,255,0.9) !important;
            font-weight: 500;
            padding: 0.5rem 1rem;
            margin: 0 0.2rem;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        .navbar .nav-link:hover {
            color: #ffffff !important;
            background: rgba(255,255,255,0.1);
            transform: translateY(-2px);
        }
        .navbar .nav-link.active {
            background: rgba(255,255,255,0.2);
            color: #ffffff !important;
        }
        .navbar .nav-link i {
            margin-right: 5px;
            font-size: 1.1rem;
        }
        .navbar-toggler {
            border-color: rgba(255,255,255,0.5);
            padding: 0.5rem;
        }
        .navbar-toggler:focus {
            box-shadow: 0 0 0 0.25rem rgba(255,255,255,0.25);
        }
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
        .footer {
            margin-top: auto;
            background: #1e3c72;
            color: #ffffff;
            padding: 2rem 0;
        }
        .footer p {
            margin-bottom: 0.5rem;
        }
        .footer a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .footer a:hover {
            color: #ffffff;
        }
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1050;
        }
    </style>
    <th:block th:replace="${styles}" />
</head>
<body>
    <!-- Toast提示容器 -->
    <div class="toast-container">
        <div th:if="${success}" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    <i class="bi bi-check-circle me-2"></i>
                    <span th:text="${success}"></span>
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
        <div th:if="${error}" class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    <i class="bi bi-exclamation-circle me-2"></i>
                    <span th:text="${error}"></span>
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>

    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-shop me-2"></i>[(${siteSettings != null ? siteSettings.get('siteName') : '优选商城'})]
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#httpServletRequest.requestURI == '/' ? 'active' : ''}" href="/">
                            <i class="bi bi-house"></i>首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#httpServletRequest.requestURI.startsWith('/category') ? 'active' : ''}" href="/category">
                            <i class="bi bi-grid"></i>分类
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#httpServletRequest.requestURI.startsWith('/cart') ? 'active' : ''}" href="/cart">
                            <i class="bi bi-cart3"></i> 购物车
                        </a>
                    </li>
                    <li class="nav-item" th:if="${session.user != null && session.user.role == 1}">
                        <a class="nav-link" href="/admin">
                            <i class="bi bi-gear"></i> 管理后台
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item" th:if="${session.user == null}">
                        <a class="nav-link" href="/login">登录</a>
                    </li>
                    <li class="nav-item" th:if="${session.user == null}">
                        <a class="nav-link" href="/register">注册</a>
                    </li>
                    <li class="nav-item dropdown" th:if="${session.user != null}">
                        <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <img th:if="${session.user.avatar != null}" 
                                 th:src="${session.user.avatar}" 
                                 class="rounded-circle me-2" 
                                 style="width: 32px; height: 32px; object-fit: cover;"
                                 alt="用户头像">
                            <i th:unless="${session.user.avatar != null}" 
                               class="fas fa-user-circle me-2"></i>
                            <span th:text="${session.user.nickname}">用户名</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li>
                                <a class="dropdown-item" href="/user/profile">
                                    <i class="fas fa-user me-2"></i>个人中心
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="/user/profile?active=orders">
                                    <i class="fas fa-clipboard-list me-2"></i>我的订单
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="/user/profile?active=address">
                                    <i class="fas fa-map-marker-alt me-2"></i>收货地址
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item" href="javascript:void(0)" onclick="logout()">
                                    <i class="fas fa-sign-out-alt me-2"></i>退出登录
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 页面主体内容 -->
    <main>
        <div th:replace="${content}">
            页面内容将在这里替换
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>关于我们</h5>
                    <p>[(${siteSettings != null ? siteSettings.get('siteName') : '优选商城'})]致力于为您提供优质的购物体验</p>
                    <p>品质保证 · 正品保障 · 假一赔十</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <h5>联系方式</h5>
                    <p><i class="bi bi-telephone me-2"></i>[(${siteSettings != null ? siteSettings.get('contactPhone') : ''}</p>
                    <p><i class="bi bi-envelope me-2"></i>[(${siteSettings != null ? siteSettings.get('contactEmail') : ''}</p>
                </div>
            </div>
            <hr class="mt-4 mb-3" style="border-color: rgba(255,255,255,0.1);">
            <div class="text-center">
                <p class="mb-0">© 2025 [(${siteSettings != null ? siteSettings.get('siteName') : '优选商城'})] | 由 Spring Boot + MyBatis-Plus + Bootstrap 驱动</p>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局确认弹窗函数
        function showConfirmModal(options) {
            const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
            $('#confirmModal .modal-title').text(options.title || '确认');
            $('#confirmModal .modal-body').text(options.message || '确定要执行此操作吗？');
            $('#confirmModal .btn-confirm').text(options.confirmText || '确定');
            $('#confirmModal .btn-confirm').off('click').on('click', function() {
                options.onConfirm && options.onConfirm();
                modal.hide();
            });
            modal.show();
        }

        // 退出登录函数
        function logout() {
            $.post('/logout', function() {
                showSuccess('已安全退出登录');
                setTimeout(function() {
                    window.location.href = '/';
                }, 1500);
            }).fail(function() {
                showError('退出登录失败，请重试');
            });
        }

        // 全局提示函数
        function showToast(message, type = 'success') {
            const toastContainer = document.querySelector('.toast-container');
            const toast = document.createElement('div');
            toast.className = `toast align-items-center text-white bg-${type} border-0`;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            toast.setAttribute('aria-atomic', 'true');
            
            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="bi bi-${type === 'success' ? 'check' : 'exclamation'}-circle me-2"></i>
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            `;
            
            toastContainer.appendChild(toast);
            const bsToast = new bootstrap.Toast(toast, {
                autohide: true,
                delay: 3000
            });
            bsToast.show();
            
            // 监听隐藏事件，移除DOM元素
            toast.addEventListener('hidden.bs.toast', function () {
                toast.remove();
            });
        }

        // 成功提示
        function showSuccess(message) {
            showToast(message, 'success');
        }

        // 错误提示
        function showError(message) {
            showToast(message, 'danger');
        }

        // 立即执行函数，不等待DOMContentLoaded
        (function() {
            // 初始化所有Toast
            var toastElList = [].slice.call(document.querySelectorAll('.toast'));
            var toastList = toastElList.map(function(toastEl) {
                return new bootstrap.Toast(toastEl, {
                    autohide: true,
                    delay: 3000
                });
            });
            
            // 显示所有Toast
            toastList.forEach(toast => {
                toast.show();
            });
        })();
    </script>

    <!-- 全局确认弹窗 -->
    <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel">确认</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    确定要执行此操作吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-confirm">确定</button>
                </div>
            </div>
        </div>
    </div>
    <th:block th:replace="${scripts}" />
</body>
</html> 